<template>
  <div class="dashboard-container" v-if="roleName1 == '管理员'">
    <h1>入住记录</h1>
    <div>
      <el-input v-model="roomNumber2" placeholder="房间号" style="width: 200px; margin-left: 400px"></el-input>
      <el-input v-model="customerName2" placeholder="顾客名称" style="width: 200px; margin-left: 40px"></el-input>
      <el-input v-model="identificationCard2" placeholder="身份证号" style="width: 200px; margin-left: 40px"></el-input>
      <el-button type="primary" @click="selectUser" :loading="selectButtonLoading"
                 style="margin-left: 40px">查询
      </el-button>
      <el-button type="" @click="checkUser" style="margin-left: 40px">重置</el-button>
      <el-table :data="userList" height="650px" style="margin-top: 40px" border>
        <el-table-column align="center" fixed prop="liveId" label="订单ID" sortable></el-table-column>
        <el-table-column align="center" fixed prop="customerId" label="顾客ID" sortable></el-table-column>
        <el-table-column align="center" fixed prop="customerName" label="顾客名称" sortable></el-table-column>
        <el-table-column align="center" fixed prop="identificationCard" label="身份证号" sortable></el-table-column>
        <el-table-column align="center" fixed prop="roomId" label="房间ID" sortable></el-table-column>
        <el-table-column align="center" fixed prop="roomNumber" label="房间号" sortable></el-table-column>
      </el-table>
    </div>

  </div>
  <!-- <div class="dashboard-container" v-else>
    <h1>无权访问</h1>
  </div> -->
</template>

<script>
// 引入mapGetters方法
import {deleteUser, insert, select, update,queryAll} from "@/api/customers";
import {mapGetters} from "vuex";

export default {
  name: "Users",
  // 使用mapGetters方法获取userId、userName、roleName
  computed: {
    ...mapGetters(["userId", "userName", "roleName"]),
  },
  data() {
    return {
      userId1: this.$store.state.user.userId,
      userName1: this.$store.state.user.userName,
      roleName1: this.$store.state.user.roleName,
      userId2: '',
      userName2: '',
      roomNumber2:'',
      customerName2:'',
      identificationCard2: '',
      roleList: [
        {id: 1, name: "管理员"},
        {id: 2, name: "普通用户"},
        {id: 3, name: "访客"},
      ],
      userList: [],
      selectButtonLoading: false,
      addUserButtonController: false,

      updateUserButtonController: false,
      updateUserDate: {
        liveId:'',
        customerId:'',
        customerName:'',
        identificationCard: '',
        roomId: '',
        roomNumber: ''
      },
      deleteController: false,
      deleteUserId: ''
    };
  },
  //页面初始化方法
  mounted() {
    this.selectUser()
  },
  // 页面的事件，方法
  methods: {
    selectUser() {
      this.selectButtonLoading = true;
      queryAll({
        roomNumber: this.roomNumber2,
        customerName: this.customerName2,
        identificationCard: this.identificationCard2,
      }).then(
        response => {
          this.userList = response.data;
          console.log("查询结果");
          console.log(this.userList);
          this.selectButtonLoading = false;
        }
      )
    },
    checkUser() {
      this.roomNumber2 = ''
      this.customerName2 = ''
      this.identificationCard2 = ''
      this.selectUser()
    },
  }
};
</script>

<style lang="scss" scoped>
// 定义dashboard类
.dashboard {

  // 定义dashboard-container类
  &-container {
    // 设置外边距
    margin: 30px;
  }

  // 定义dashboard-text类
  &-text {
    // 设置字体大小
    font-size: 30px;
    // 设置行高
    line-height: 46px;
  }
}
</style>
